<template>
	<view class="login-container">
		<view class="nav" @click="goback">
			<u-icon name="arrow-left" size="45" color="#e7e7e7"></u-icon>
		</view>
		<view class="header">
			<image class="logo" src="@/static/logo/hksj-logo-02.png"></image>
		</view>
		<view class="login-form">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">
				<uni-forms-item label="用户名" required name="username">
					<uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">登 录</button>
		</view>
		<view class="footer">
			<view style="margin-right: 20rpx;">
				忘记密码
			</view>
			<text> | </text>
			<view style="margin-left: 20rpx;">
				注册账号
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					username: '',
					password: '',
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能输入数字'
						}]
					}
				},
			};
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: linear-gradient(to bottom, #96c5f5, #f0f6f9);
		// height: 100%;加上padding的内容会出现滚动条需要设置box-sizing: border-box;
		padding: 60rpx 50rpx;
		box-sizing: border-box;

		.header {
			display: flex;
			justify-content: center;

			.logo {
				width: 260rpx;
				height: 260rpx;
			}
		}

		.login-form {
			flex: 1;
			padding: 40rpx;
		}

		.footer {
			display: flex;
			height: 80rpx;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
</style>